<template>
    <div class="mate">
        <v-navbar></v-navbar>
        <div class="wrapper">
            <table class="mate-wrapper">
                <tr class="mate-row">
                    <th class="mate-col">昵称</th>
                    <th class="mate-col">手机号</th>
                    <th class="mate-col">等级</th>
                    <th class="mate-col">推广时间</th>
                </tr>
                <tr v-if="users.length > 0" v-for="(user, index) in users" :key="index" class="mate-row">
                    <td class="mate-col mate-x">{{user.nickName}}</td>
                    <td class="mate-col">{{user.phoneNumber}}</td>
                    <td class="mate-col">{{ranks[user.userGrade]}}</td>
                    <td class="mate-col">{{user.createTime}}</td>
                </tr>
            </table>
          <div class="mate-null" v-if="users.length === 0">
            <Icon type="ios-paper" class="icon-null"/>
            推广记录为空~~~~
          </div>
        </div>
    </div>
</template>

<script>
import navbar from '@c/navbar/navbar'
import { mapState, mapMutations } from 'vuex'
import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'
import mateChat from './mateChat'
export default {
	name: 'Mate',
	data() {
		return {
			users: [],
      ranks: ['普通','1星','2星','3星','4星','股东', 'VIP'],
		}
	},
	components: {
		'v-navbar': navbar,
	},
	computed: {
		...mapState(['wtitle', 'rback']),
	},
	methods: {
		...mapMutations(['WTITLE', 'RBACK']),
		// 查询好友数据
		_selectMate() {
			let userInfo = {
				userId: window.localStorage.userId,
			}
			this.$store.state.loadding = true
			tokenPost(tokenLink.mate.select, userInfo).then(re => {
				this.$store.state.loadding = false
				if (re.status === 0) {
					this.users = re.data
				} else {
					this.$Message.error(re.msg)
				}
			})
		},
	},
	created() {
		this.WTITLE('推广记录')
		this.RBACK(true)
		this._selectMate()
	},
}
</script>
